<template>
  <div class="bg">
    <div class="title">
      <img src="../assets/logo1.png" class="logo"/>
      <template v-for="(item, index) in tarr" :key="index">
        <div class="t" @mouseenter="enter(item.i)" @mouseleave="leave(item.i)">
          {{ item.title }}
          <div class="cloud" v-show="item.f"></div>
          <div
            class="stitle"
            v-show="item.f"
            @mouseenter="enter(item.i)"
            @mouseleave="leave(item.i)"
          >
            <div class="s" v-for="(i, ind) in item.children" :key="ind">
              {{ i }}
            </div>
          </div>
        </div>
      </template>
    </div>
    <div class="phone" v-if="false">电话：xxx-xxx-xxxx</div>
    <div class="en">En</div>
  </div>
</template>

<script lang="ts">
import { reactive } from "@vue/reactivity";
export default {
  setup() {
    let t1 = reactive({
      title: "首页",
      f: false,
      children: [],
      i: 1,
    });
    let t2 = reactive({
      title: "承恩产品",
      f: false,
      children: ["AI早筛检测试剂盒", "AI精筛检测试剂盒"],
      i: 2,
    });
    let t3 = reactive({
      title: "承恩动态",
      f: false,
      children: ["企业新闻", "科学文章"],
      i: 3,
    });
    let t4 = reactive({
      title: "患者专区",
      f: false,
      children: ["患者主页"],
      i: 4,
    });
    let t5 = reactive({
      title: "关于承恩",
      f: false,
      children: ["承恩介绍","我们的使命","管理团队","发展历程"],
      i: 5,
    });
    let t6 = reactive({
      title: "加入承恩",
      f: false,
      children: ["校园招聘","社会招聘"],
      i: 6,
    });
    let tarr = [t1, t2, t3, t4, t5, t6];

    function enter(i: any) {
      //tarr[i - 1].f = true;
      for (let i = 0; i < tarr.length; i++) {
        tarr[i].f = true
      }
    }
    function leave(i: any) {
      //tarr[i - 1].f = false;
      for (let i = 0; i < tarr.length; i++) {
        tarr[i].f = false
      }
    }
    return {
      tarr,
      enter,
      leave,
    };
  },
};
</script>

<style lang="scss">
.bg {
  position: relative;
  width: 100%;
  height: 70px;
  background-color:transparent;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.05);
  transition: 0.4s ease;
}
.bg:hover {
  background-color: rgba(255, 255, 255, 0.3);
}
.title {
  position: absolute;
  height: 100%;
  left: 200px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  align-content: center;
  .t {
    width: 150px;
    height: 70px;
    text-align: center;
    line-height: 70px;
    transition: 0.2s ease;
    position: relative;
  }
  .t:hover {
    cursor: pointer;
    background-color: rgba(247, 247, 247, 0.3);
  }
}
.logo {
  position: absolute;
  height: 100px;
  top: -6px;
  left: -150px;
  opacity: 0.8;
  transform: translateY(15px);
  filter: drop-shadow(0px 0px 20px rgba(255, 255, 255, 1));
}
.cloud {
  position: absolute;
  height: 3px;
  background-color: rgb(115, 180, 255);
  width: 100%;
  top: 67px;
}
.stitle {
  background-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  position: absolute;
  width: 150px;
  transition: 0.3s ease;
  overflow: hidden;
  .s:hover {
    background-color: rgba(250, 250, 250, 0.3);
  }
}
.phone {
  height: 70px;
  line-height: 70px;
  position: absolute;
  right: 10%;
}
.en {
  position: absolute;
  font-size: 20px;
  border-radius: 50%;
  border: rgb(216, 216, 216) solid 2px;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 35px;
  top: 15px;
  right: 5%;
}
.en:hover {
  cursor: pointer;
}
</style>